<template>
    <div>
        <van-swipe class="swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="(item,index) in images" :key="index">
                <img :src="item.image" class="swipe-image" alt=""/>
            </van-swipe-item>
        </van-swipe>
        <div class="global-nav">
            <dl class="nav-item">
                <a href="/h5/item/search?sort=time-desc">
                    <dt class="nav-icon">
                        <img src="/images/h5/nav/xinpin.png">
                    </dt>
                    <dd class="nav-title">新品</dd>
                </a>
            </dl>
            <dl class="nav-item">
                <a href="/h5/item/search?sort=sale-desc">
                    <dt class="nav-icon">
                        <img src="/images/h5/nav/hot.png">
                    </dt>
                    <dd class="nav-title">热卖</dd>
                </a>
            </dl>
            <dl class="nav-item">
                <a href="/h5/live">
                    <dt class="nav-icon">
                        <img src="/images/h5/nav/live.png">
                    </dt>
                    <dd class="nav-title">直播</dd>
                </a>
            </dl>
            <dl class="nav-item">
                <a href="/h5/video">
                    <dt class="nav-icon">
                        <img src="/images/h5/nav/shipin.png">
                    </dt>
                    <dd class="nav-title">视频</dd>
                </a>
            </dl>
            <dl class="nav-item">
                <dt class="nav-icon">
                    <img src="/images/h5/nav/more.png">
                </dt>
                <dd class="nav-title">更多</dd>
            </dl>
        </div>
        <div class="home-banner">
            <img src="/images/h5/mryx.jpg">
        </div>

        <item-grid-view :items="items"></item-grid-view>
        <tab-bar active-index="0"/>
<!--        <van-popup v-model="showRedpack">-->
<!--            <div class="redpack" @click="sendPack"></div>-->
<!--        </van-popup>-->
    </div>
</template>

<script>
    import TabBar from '../common/TabBar';
    import ItemGridView from '../common/ItemGridView';

    export default {
        name: "App",
        components: {
            TabBar,
            ItemGridView
        },
        data: function () {
            return {
                images: [],
                items: [],
                showRedpack: true
            }
        },
        mounted() {
            var $this = this;
            this.$get('/webapi/block/item/batchget?block_id=1').then(function (response) {
                $this.images = response.data.items;
            });

            this.$get('/webapi/item/batchget').then(function (response) {
                $this.items = response.data.items;
            });
        },
        methods: {
            sendPack: function () {
                this.$axios.get('/webapi/redpack/send').then(response => {
                    this.$toast.fail(response.data.result.return_msg);
                });
            }
        }
    }
</script>

<style lang="scss">
    .new-products {
        font-size: 22px;
        text-align: center;
        padding: 15px;
        display: block;
        font-weight: 500;
    }

    .van-popup {
        background: none;
    }
</style>
